// ClickedPints.js (c) 2012 matsuda
// Vertex shader program
var VSHADER_SOURCE = `attribute vec4 a_Position;
  attribute vec2 a_TexCoord;
  varying vec2 v_TexCoord;
  void main() {
    gl_Position =  a_Position;
    v_TexCoord = a_TexCoord;
  }`;

// Fragment shader program
var FSHADER_SOURCE = `precision mediump float;
  uniform sampler2D u_Sampler1;
  uniform sampler2D u_Sampler2;
  varying vec2 v_TexCoord;
  uniform float u_weight;
  void main() {
    vec4 color1;
    if(u_weight>0.0){
      if(v_TexCoord.x<u_weight){
        color1 = texture2D(u_Sampler1,v_TexCoord+vec2(1.0-u_weight,0));
      }else{
        color1 = texture2D(u_Sampler2,v_TexCoord-vec2(u_weight,0));
      }
    } else{
       if(v_TexCoord.x<-u_weight){
         color1 = texture2D(u_Sampler2,v_TexCoord+vec2(1.0+u_weight,0));
       }else{
         color1 = texture2D(u_Sampler1,v_TexCoord+vec2(u_weight,0));
       }
     }
    gl_FragColor =  color1;
  }`;


var imageMumber = 0;
var u_weight;
var gl;

var weight= 0;
var _weight = 0.005;

function main() {
  // Retrieve <canvas> element
  var canvas = document.getElementById("webgl");

  // Get the rendering context for WebGL
  gl = getWebGLContext(canvas);
  if (!gl) {
    console.log("Failed to get the rendering context for WebGL");
    return;
  }

  // Initialize shaders
  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    console.log("Failed to intialize shaders.");
    return;
  }

  //坐标
  var verticesPosition = new Float32Array([
    -0.5,0.5,
    -0.5,-0.5,
    0.5,0.5,
    0.5,-0.5,
  ]);

  var verticesPositionBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, verticesPositionBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, verticesPosition, gl.STATIC_DRAW);

  // // Get the storage location of a_Position
  var a_Position = gl.getAttribLocation(gl.program, "a_Position");
  if (a_Position < 0) {
    console.log("Failed to get the storage location of a_Position");
    return;
  }
  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(a_Position);


  //贴图坐标
  var verticesTexCoordsBuffer = gl.createBuffer();
  a_TexCoord = gl.getAttribLocation(gl.program, "a_TexCoord");
  if (a_TexCoord < 0) {
    console.log("Failed to get the storage location of a_TexCoord");
    return;
  }
  gl.enableVertexAttribArray(a_TexCoord);

  var verticesTexCoords = new Float32Array([
    0, 1,
    0, 0,
    1, 1,
    1, 0,
  ]);
  gl.bindBuffer(gl.ARRAY_BUFFER, verticesTexCoordsBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, verticesTexCoords, gl.STATIC_DRAW);
  gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, 0, 0);


  //获取片元着色器的u_weight地址
  u_weight = gl.getUniformLocation(gl.program, "u_weight");
  if (!u_weight) {
    console.log("Failed to get the storage location of u_weight");
    return;
  }


  // Specify the color for clearing <canvas>
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  // Clear <canvas>
  gl.clear(gl.COLOR_BUFFER_BIT);


  this.loadImage("resources/yellowflower.jpg","u_Sampler1",0);
  this.loadImage("resources/redflower.jpg","u_Sampler2",1);
}

function loadImage(path,name,texUnit){
  //加载图片
  var texture = gl.createTexture();
  var u_Sampler = gl.getUniformLocation(gl.program, name);
  var image = new Image();
  image.onload = () => {
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
    if(texUnit==0){
      gl.activeTexture(gl.TEXTURE0);
    }else{
      gl.activeTexture(gl.TEXTURE1);
    }
    
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);
    gl.uniform1i(u_Sampler, texUnit);
    this.loadCallback();
  };
  image.src = path;
}

function loadCallback(){
  imageMumber++;
  if(imageMumber>=2){
    this.changeFloat();
  }
}

function changeFloat(){
  if(weight>=1.0 || weight<=-1){
    weight = 0;
    _weight = -_weight;
  }
  weight += _weight;

  gl.uniform1f(u_weight,weight);
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  requestAnimationFrame(() => {
    changeFloat();
  });
}
